<script setup>
  import { computed } from 'vue'
  import ExSearchTableColumn from './ExSearchTableColumn'

  const props = defineProps({
    columns: {
      type: Array,
      required: true
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    // pager组件相关
    showPager: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () => [10, 15, 30, 50]
    }
  })

  const emits = defineEmits(['current-change', 'size-change'])

  const handleCurrentChange = (val) => {
    emits('current-change', val)
  }

  const handleSizeChange = (val) => {
    emits('size-change', val)
  }

  const configColumns = computed(() =>
    props.columns.filter((_) => _.show != false)
  )
</script>

<template>
  <div class="table-detail">
    <el-table
      :cell-style="{ backgroundColor: '#F3F7FF' }"
      size="small"
      v-bind="$attrs"
    >
      <el-table-column
        v-if="showCheckbox"
        type="selection"
        :width="60"
        align="center"
      ></el-table-column>
      <template v-for="(column, index) in configColumns">
        <el-table-column
          :key="index"
          :type="column.type"
          v-if="column.type == 'selection' || column.type == 'index'"
          v-bind="column"
          align="center"
          :width="60"
        ></el-table-column>
        <el-table-column
          :key="index + '1'"
          v-else-if="!column.hasOwnProperty('children')"
          v-bind="column"
          :align="column.align || 'center'"
        >
          <template #default="{ row }">
            <span v-if="!column.render">{{ row[column.prop] }}</span>
            <template v-else>
              <ex-search-table-column
                :scope="row"
                :render="column.render"
              ></ex-search-table-column>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="index + '2'"
          v-bind="column"
          :align="column.align || 'center'"
        >
          <el-table-column
            v-for="(child, index0) in column.children"
            v-bind="child"
            :key="index + index0"
            :align="child.align || 'center'"
          >
            <template #default="{ row }">
              <span v-if="!child.render">{{ row[child.prop] }}</span>
              <template v-else>
                <ex-search-table-column
                  :scope="row"
                  :render="child.render"
                ></ex-search-table-column>
              </template>
            </template>
          </el-table-column>
        </el-table-column>
      </template>
      <slot></slot>
      <template #append>
        <slot name="append"></slot>
      </template>
    </el-table>
    <div v-if="showPager" class="pagination-box">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :hideOnSinglePage="total == 0 ? true : false"
        :background="true"
        :total="total"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  :deep(.el-table) {
    th.el-table__cell {
      background: linear-gradient(
        to bottom,
        rgba(158, 198, 255, 0.15) 0%,
        rgba(60, 140, 255, 0.1) 100%
      );

      .cell {
        font-size: 14px;
        color: #67738f;
      }
    }

    .el-table__body-wrapper {
      .el-table__cell {
        border-color: rgba(149, 151, 152, 0.31);

        .cell {
          font-size: 14px;
          color: #666666;
        }
      }
    }

    .el-table__body tr:hover > td.el-table__cell {
      background: linear-gradient(
        360deg,
        rgba(158, 198, 255, 0.15) 0%,
        rgba(60, 140, 255, 0.1) 100%
      );
    }
  }

  :deep(.pagination-box) {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;

    .el-pagination {
      margin-top: 0;

      .el-pager {
        li {
          margin: 0;

          &:not(.is-active) {
            background: transparent;
            border-color: transparent;
          }

          &.is-active {
            background: linear-gradient(180deg, #0b8aff 0%, #0daaff 100%);
          }
        }
      }

      .btn-prev,
      .btn-next {
        background: transparent;
        border-color: transparent;
      }

      .el-pagination__sizes {
        .el-select__wrapper {
          background-color: rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 0 1px rgba(220, 223, 230, 0.5) inset;
        }
      }

      .el-pagination__jump {
        .el-input .el-input__wrapper {
          background-color: rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 0 1px rgba(220, 223, 230, 0.5) inset;
        }
      }
    }
  }
</style>
